<template>
  <view class="isometric-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <uni-icons type="left" size="24" color="#fff" class="back-icon" @click="handleBack"></uni-icons>
      <text class="nav-title">我的消息</text>
    </view>

    <!-- 主体内容 -->
    <view class="main-content">
      <!-- 消息列表 -->
      <view class="message-list">
        <!-- 消息项1：医生回复 -->
        <view 
          class="message-item" 
          :class="{ unread: !messages[0].read }"
          @click="viewMessage(0)"
        >
          <view class="message-icon doctor-icon">
            <uni-icons type="user-md" size="24" color="#fff"></uni-icons>
          </view>
          <view class="message-content">
            <view class="content-header">
              <text class="msg-sender">吴医生</text>
              <text class="msg-time">{{ messages[0].time }}</text>
            </view>
            <text class="msg-desc">{{ messages[0].content }}</text>
          </view>
          <view class="unread-dot" v-if="!messages[0].read"></view>
        </view>

        <!-- 消息项2：挂号通知 -->
        <view 
          class="message-item" 
          :class="{ unread: !messages[1].read }"
          @click="viewMessage(1)"
        >
          <view class="message-icon notice-icon">
            <uni-icons type="calendar" size="24" color="#fff"></uni-icons>
          </view>
          <view class="message-content">
            <view class="content-header">
              <text class="msg-sender">挂号中心</text>
              <text class="msg-time">{{ messages[1].time }}</text>
            </view>
            <text class="msg-desc">{{ messages[1].content }}</text>
          </view>
          <view class="unread-dot" v-if="!messages[1].read"></view>
        </view>

        <!-- 消息项3：系统提醒 -->
        <view 
          class="message-item" 
          :class="{ unread: !messages[2].read }"
          @click="viewMessage(2)"
        >
          <view class="message-icon system-icon">
            <uni-icons type="bell" size="24" color="#fff"></uni-icons>
          </view>
          <view class="message-content">
            <view class="content-header">
              <text class="msg-sender">系统通知</text>
              <text class="msg-time">{{ messages[2].time }}</text>
            </view>
            <text class="msg-desc">{{ messages[2].content }}</text>
          </view>
          <view class="unread-dot" v-if="!messages[2].read"></view>
        </view>
      </view>
    </view>

    <!-- 消息详情弹窗 -->
    <uni-popup v-model="showDetail" type="center" :mask-click="false">
      <view class="detail-popup">
        <view class="popup-header">
          <text class="popup-title">{{ currentMsg.sender }}</text>
          <uni-icons type="close" size="20" color="#666" @click="showDetail = false"></uni-icons>
        </view>
        
        <view class="popup-content">
          <text class="detail-time">{{ currentMsg.time }}</text>
          <text class="detail-content">{{ currentMsg.content }}</text>
          
          <!-- 医生消息额外内容 -->
          <view class="doctor-extra" v-if="currentMsg.type === 'doctor'">
            <text class="extra-title">医嘱补充：</text>
            <text class="extra-text">请在复诊前3天避免剧烈运动，保持清淡饮食</text>
            <view class="reply-btn" @click="gotoReply">回复消息</view>
          </view>
          
          <!-- 挂号通知额外内容 -->
          <view class="notice-extra" v-if="currentMsg.type === 'notice'">
            <text class="extra-title">挂号详情：</text>
            <text class="extra-text">科室：内科门诊</text>
            <text class="extra-text">时间：2024-06-05 09:30</text>
            <text class="extra-text">地点：门诊楼3楼305诊室</text>
          </view>
        </view>
        
        <view class="popup-footer">
          <view class="close-btn" @click="showDetail = false">关闭</view>
        </view>
      </view>
    </uni-popup>
	<tabBar></tabBar>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 三条核心消息数据
const messages = ref([
  {
    type: 'doctor',
    sender: '吴医生',
    content: '你的体检报告已审核完成，整体指标正常，血脂略高建议控制油腻食物摄入',
    time: '2024-05-28 15:30',
    read: false
  },
  {
    type: 'notice',
    sender: '挂号中心',
    content: '你预约的下周三内科门诊已成功确认，请注意按时前往',
    time: '2024-05-27 10:15',
    read: false
  },
  {
    type: 'system',
    sender: '系统通知',
    content: '你的健康档案已更新，新增2024年度体检数据',
    time: '2024-05-26 08:40',
    read: true
  }
]);

// 消息详情相关
const showDetail = ref(false);
const currentMsg = ref({});

// 查看消息详情
const viewMessage = (index) => {
  // 标记为已读
  messages.value[index].read = true;
  // 显示详情
  currentMsg.value = { ...messages.value[index] };
  showDetail.value = true;
};

// 返回上一页
const handleBack = () => {
  uni.navigateBack({ delta: 1 });
};

// 回复医生消息
const gotoReply = () => {
  uni.showToast({ title: '跳转到回复界面', icon: 'none' });
  showDetail.value = false;
};
</script>

<style scoped>
/* 全局容器 */
.isometric-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
}

/* 顶部导航 */
.nav-bar {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  border-radius: 12px;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(107, 127, 215, 0.2);
}

.back-icon {
  cursor: pointer;
}

.nav-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

/* 消息列表 */
.main-content {
  max-width: 800px;
  margin: 0 auto;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.message-item {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  cursor: pointer;
}

.message-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.message-item.unread {
  border-left: 3px solid #6b7fd7;
}

/* 消息图标 */
.message-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.doctor-icon {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
}

.notice-icon {
  background: linear-gradient(135deg, #5bd1a3, #45b787);
}

.system-icon {
  background: linear-gradient(135deg, #fbbf24, #f59a23);
}

/* 消息内容 */
.message-content {
  flex: 1;
  overflow: hidden;
}

.content-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.msg-sender {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.msg-time {
  font-size: 12px;
  color: #999;
}

.msg-desc {
  font-size: 14px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 未读标记 */
.unread-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #e74c3c;
  margin-left: 10px;
}

/* 消息详情弹窗 */
.detail-popup {
  width: 90%;
  max-width: 500px;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.popup-content {
  margin-bottom: 25px;
}

.detail-time {
  font-size: 12px;
  color: #999;
  display: block;
  margin-bottom: 15px;
}

.detail-content {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 20px;
  display: block;
}

/* 额外内容样式 */
.extra-title {
  font-size: 14px;
  font-weight: 600;
  color: #6b7fd7;
  display: block;
  margin-bottom: 8px;
}

.extra-text {
  font-size: 14px;
  color: #666;
  display: block;
  margin-bottom: 6px;
  line-height: 1.5;
}

.reply-btn {
  margin-top: 15px;
  padding: 8px 15px;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
  border-radius: 6px;
  font-size: 14px;
  display: inline-block;
  cursor: pointer;
}

.popup-footer {
  display: flex;
  justify-content: center;
}

.close-btn {
  padding: 10px 30px;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}
</style>
